import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class OverflowBoxPage extends PageWithTitle {
  const OverflowBoxPage({super.key}) : super("内容可溢出容器(OverflowBox)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return [
      const PrimaryTitle("简介"),
      const BodyText("我们常见的组件，像Container会通过约束来布局子组件以避免它测量出一个超"
          "出容器大小的尺寸，通过溢出组件使得子组件可以测量到一个超出Container的大小"),
      AppSpacer.large,
      SizedBox(
        width: 80,
        height: 10,
        child: Container(
          color: Colors.red,
          width: 100,
          height: 40,
          alignment: Alignment.center,
          child: const Text("100x40"),
        ),
      ),
      const LabelText("这里虽然设置了组件宽度为100，但仍旧被Container强制拉宽到铺满宽度，"
          "高度设置了超出容器的大小导致被裁剪"),
      AppSpacer.mini,
      Container(
        width: 80,
        height: 10,
        color: Theme.of(context).colorScheme.surfaceContainer,
        child: OverflowBox(
          alignment: const Alignment(1.2, -1.7),
          minWidth: 0,
          maxWidth: double.infinity,
          minHeight: 0,
          maxHeight: double.infinity,
          child: Container(
            color: Colors.red,
            width: 100,
            height: 40,
            alignment: Alignment.center,
            child: const Text("400x40"),
          ),
        ),
      ),
      AppSpacer.large,
      AppSpacer.large,
      AppSpacer.large,
      const LabelText("通过溢出组件，我们重新给定约束，让子组件取得自身想要的宽高，他也因此可"
          "以绘制到Container之外"),
      AppSpacer.mini,
      const UlItem("OverflowBox"),
      const BodyText("溢出盒子在中间重新设置约束，使得子组件按照新的约束条件可以测量到超出原"
          "有约束限制的尺寸"),
      const LabelText("- minWidth maxWidth minHeight maxHeight尺寸约束，自适应直接"
          "设置为double.infinity即可"),
      const LabelText("- alignment 对齐效果，可以自定义对齐位置，来自由移动，好像也没啥用"),
      AppSpacer.large,
      Row(
        children: [
          Container(
            color: Theme.of(context).colorScheme.surfaceContainer,
            child: SizedOverflowBox(
              size: const Size(200, 10),
              child: Container(
                width: 100,
                height: 40,
                color: Colors.red,
                alignment: Alignment.center,
                child: const Text("400x40"),
              ),
            ),
          ),

          Container(
            width: 100,
            height:20,
            color: Colors.red,
            alignment: Alignment.center,
            child: const Text("100x20"),
          ),
        ],
      ),
      AppSpacer.large,
      const UlItem("SizedOverflowBox"),
      const BodyText("固定尺寸的溢出盒子，溢出盒子固定大小，但子组件的测量不受溢出盒子限制"),
      const LabelText("- size 溢出盒子的尺寸，对于外层组件会按照这个尺寸进行布局"),
      const LabelText("- alignment 对齐效果"),
    ];
  }
}
